import { View, Text } from '@tarojs/components';
import { useState, useEffect } from 'react';
import classnames from 'classnames';
import './index.scss';

interface IProps {
  checked: boolean;
  onChange?: (checked: boolean) => void;
}

export default function ({ checked, onChange }: IProps) {
  const [_checked, setChecked] = useState(checked);
  const _onChange = () => {
    setChecked(!_checked);
    onChange && onChange(!_checked);
  };
  useEffect(() => {
    setChecked(checked);
    // onChange && onChange(checked);
  }, [checked, onChange]);

  return (
    <View className="checkbox-component" onClick={_onChange}>
      <Text className={classnames('iconfont', _checked ? 'icon-selected' : 'icon-unselect')}></Text>
    </View>
  );
}
